<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //删除
        var del = function(){
                    var tr = this.parentNode.parentNode;
                    var name = tr.getElementsByTagName("td")[0].innerHTML;
                    if(confirm("确定删除"+name+"吗？")){
                        tr.parentNode.removeChild(tr);
                    }                   
                    return false;
                    }

        window.onload = function(){
            var a_list = document.getElementsByTagName("a");
            for(var i = 0; i<a_list.length; i++){
                a_list[i].onclick =  del;
                };
          
            
            document.getElementById('sub').onclick = function(){
                //查找姓名
                var name = document.getElementById('addname').value;
                //邮箱
                var email = document.getElementById('addemail').value;
                //联系方法
                var tel = document.getElementById('addtel').value;
                //创建一个tr
                var tr = document.createElement("tr");
                tr.innerHTML = "<td>"+name+"</td>"+
                                "<td>"+email+"</td>"+
                                "<td>"+tel+"</td>"+
                                "<td><a href=''>删除信息</a></td>";
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = del;
                //找到tbody
                var tbody = document.getElementsByTagName("tbody")[0];
                //将tr放在tbody内
                tbody.appendChild(tr);
            }
           
        }
    </script>
    <style>
        div{
            width: 370px;
            margin-top: 20px;
            border: 2px solid blue;
            background-color: antiquewhite
        };
        #sub{
             margin-left: 100px;
        }
        p{
            border: 2px solid blue;
        }
        img{
            position:absolute;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
    <table border="1px" id="tab1">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>联系方式</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>苏凉</td>
            <td>123@qq.com</td>
            <td>123</td>
            <td><a href="">删除信息</a></td>
        </tr>
        <tr>
            <td>suliang</td>
            <td>4253@qq.com</td>
            <td>4253</td>
            <td><a href="">删除信息</a></td>
        </tr>
        
    </table>
    </div>

    <div>
    <table border="1px" id="tab2">
        <tr>
            <th colspan="2" >添加信息</th>
        </tr>
        <tr>
            <td>姓名：</td>
            <td><input type="text" id="addname" name="name"></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" id="addemail" name="email"></td>
        </tr>
        <tr>
            <td>联系方式：</td>
            <td><input type="text" id="addtel" name="tel"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" id="sub"></td>
        </tr>
    </table>
    <p class="p1">点击提交</p>
    <img src="../img2/4.jpg" alt="TJCU">
    </div>

    
    
</body>
</html>